$(function(){
    // 切换内容
    var middleP2 = $('.middleP2')
    var m2box = $('.m2box ')
    var m2yc = $('.m2yc')
    middleP2.click(function(){
        middleP2.removeClass("mP2border")
        $(this).addClass('mP2border')
        if(this == middleP2[0]){
            m2yc.css('display','none')
            $(m2yc[0]).css('display','block')
        }else if(this == middleP2[1]){
            m2yc.css('display','none')
            $(m2yc[1]).css('display','block')
        }if(this == middleP2[2]){
            m2yc.css('display','none')
            $(m2yc[2]).css('display','block')
        }
    })

    // 获取酷玩-最新内容
    $.get('http://localhost:3000/play/new',function(val){
        for (var i = 0; i < val.length-2; i++) {
            for (var ii = 0; ii < val[i].length; ii++) {
    // 添加内容
                var content = $(
                    `<div class="cttbox1">
                    <div class="cttimg">
                        <img  class="cttimg1" src="${val[i][ii].img}" alt="">
                    </div>
                    <p class="bgP ctt4p1">${val[i][ii].description}</p>
                    <p class="bgP ctt4p2">${val[i][ii].text}</p>
                    <div class="cttXia">
                        <div class="cttXt ctt4p3">${val[i][ii].price}</div>
                        <div class="cttXi">
                            <img src="../img/xin.png" >3
                            <img src="../img/reply.png" >3
                        </div>
                    </div>
                </div>`
                )
                $(m2box[0]).append(content)
            }
        }
    })
    // 获取酷玩-最热内容
    $.get('http://localhost:3000/play/hot',function(val){
    // 循环添加内容
    for (var i = 0; i < val.length-1; i++) {
        for (var ii = 0; ii < val[i].length-4; ii++) {
            var content = $(
                `<div class="cttbox1">
                <div class="cttimg">
                    <img  class="cttimg1" src="${val[i][ii].img}" alt="">
                </div>
                <p class="bgP ctt4p1">${val[i][ii].description}</p>
                <p class="bgP ctt4p2">${val[i][ii].text}</p>
                <div class="cttXia">
                    <div class="cttXt ctt4p3">${val[i][ii].price}</div>
                    <div class="cttXi">
                        <img src="../img/xin.png" >3
                        <img src="../img/reply.png" >3
                    </div>
                </div>
            </div>`
            )
            $(m2box[1]).append(content)
        }
    }
    })
    
    // 酷玩   品类

    var shuZhu = [
        [
        {img:'../img1/cat_1.png',text:'空气净化器（21）'},
        {img:'../img1/cat_2.png',text:'吸尘器（21）'},
        {img:'../img1/cat_3.png',text:'扫地机器人（21）'},
        {img:'../img1/cat_4.png',text:'电风扇（21）'},
        {img:'../img1/cat_5.png',text:'净水壶（21）'},
        {img:'../img1/cat_6.png',text:'电饭煲（21）'},
        {img:'../img1/cat_7.png',text:'咖啡机（21）'},
        {img:'../img1/cat_8.png',text:'原汁机（21）'}
        ],
        [
        {img:'../img1/cat_9.png',text:'电动牙刷（21）'},
        {img:'../img1/cat_10.png',text:'剃须刀（21）'},
        {img:'../img1/cat_11.png',text:'按摩器（21）'},
        ],
        [
        {img:'../img1/cat_1.png',text:'电动牙刷（21）'},
        {img:'../img1/cat_2.png',text:'剃须刀（21）'},
        {img:'../img1/cat_3.png',text:'按摩器（21）'},
        ],
        [
        {img:'../img1/cat_4.png',text:'电风扇（21）'},
        {img:'../img1/cat_5.png',text:'净水壶（21）'},
        {img:'../img1/cat_6.png',text:'电饭煲（21）'},
        {img:'../img1/cat_2.png',text:'吸尘器（21）'},
        {img:'../img1/cat_9.png',text:'电动牙刷（21）'},
        ],
        [
        {img:'../img1/cat_5.png',text:'净水壶（21）'},
        {img:'../img1/cat_6.png',text:'电饭煲（21）'},
        {img:'../img1/cat_9.png',text:'电动牙刷（21）'},
        ],
        [
        {img:'../img1/cat_4.png',text:'电风扇（21）'},
        {img:'../img1/cat_6.png',text:'电饭煲（21）'},
        {img:'../img1/cat_9.png',text:'电动牙刷（21）'},
        ],
    ]

    $.get('http://localhost:3000/play/category',function(val){
        console.log(val);
        console.log(val[0].list[0].nums);
        console.log(val[0].list[0].productName);
        for (var i = 0; i < val.length; i++) {
            var content = $(
                `<div class="m2boxmax width">
                <p class="m2boxmaxP">${val[i].title}</p>
                <div class="m2boxmaxBox1 ">
                    
                </div>
                <div class="m2boxmaxBox11 ">
                    
                </div>
            </div>`
            )
            $(m2yc[2]).append(content)// 添加框架
            
            var m2boxmaxBox1 = $('.m2boxmaxBox1')
            var m2boxmaxBox11 = $('.m2boxmaxBox11')
            
            for (var ii = 0; ii < shuZhu[i].length; ii++) {
                var content1 = $(
                `<div>
                <div class="m2boxmaxDiv">
                    <img src="${shuZhu[i][ii].img}" alt="">
                </div>
                <p class="m2boxmaxDivP">${shuZhu[i][ii].text})</p>
                </div>`)  
                var content2 = $(
                `<p class="m2boxmaxDivP">${val[i].list[ii].productName}(${val[i].list[ii].nums})</p>`)  
            $(m2boxmaxBox1[i]).append(content1)
            $(m2boxmaxBox11[i]).append(content2)
            }
            
        }
    })


})
